<template>
  <div class="page">
    <div class="topbar">
      <el-menu mode="horizontal" :default-active="0" @select="menuSelectFunc">
        <el-menu-item v-for="(item, index) in menus" :index="index" :key="index">{{item}}</el-menu-item>
      </el-menu>
    </div>
    <router-view class="subpage"/>
  </div>
</template>

<script>
export default {
  mounted() {},
  data() {
    return {
      menus: ["品牌", "内容", "传播案例", "品牌榜", "指数"],
      routes:[
        "/main/brand",
        "/main/content",
        "/main/case",
        "/main/brandtop",
        "/main/index",
      ]
    };
  },
  methods: {
    menuSelectFunc(index){
      this.$router.push(this.routes[index]);
    }
  }
};
</script>


<style scoped>
.page {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.topbar {
  display: flex;
  flex-direction: row;
  justify-content: center;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}
.subpage {
  flex: 1;
}
</style>